import './aboutus.scss'
import React, { useState } from 'react';
import { Button, Modal,Input,message } from 'antd';
import { useNavigate } from 'react-router';
const { TextArea } = Input;
const App = () => {
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [useIf, setUseIf] = useState()
    const [messageApi, contextHolder] = message.useMessage();
    const navigate = useNavigate()
    const showModal = (data) => {
        setUseIf(data)
        setIsModalOpen(true);
    };

    const handleOk = () => {
        navigate('/upgradation')
        setIsModalOpen(false);
    };
    const handleOk2 = () => {
        messageApi.open({
            type: 'success',
            content: '提交成功',
        });
        setIsModalOpen(false);
    };

    const handleCancel = () => {
        setIsModalOpen(false);
    };
    const onChange = (e) => {
        console.log('Change:', e.target.value);
      };
    return (
        <div className="aboutus">
            {contextHolder}
            <Modal title="意见反馈" open={isModalOpen} onOk={()=>{
                useIf?handleOk2():handleOk()
            }} onCancel={handleCancel} cancelText={'取消'} okText={useIf ? '提交意见' : '确认升级'}>
                {
                    !useIf ? (<>
                        <h1>检查更新</h1>
                        <h3>当前版本:V2.0.3</h3>
                        <h3>发现新版本,需要现在升级吗</h3></>) : (
                        <>
                            <h3>您的意见是我们进步的方向</h3>
                            <TextArea
                                showCount
                                maxLength={100}
                                style={{
                                    height: 120,
                                    resize: 'none',
                                    marginBottom:20
                                }}
                                onChange={onChange}
                                placeholder="请输入您宝贵的意见"
                            />
                        </>
                    )
                }
            </Modal>
            <div className='aboutus_header'>
                <span>关于我们</span>
            </div>
            <span style={{ color: 'gray', margin: 15 }}>公司信息</span>
            <div className='respassword'>
                <span>嗨课堂是基于互联网直播互动技术，以网络教学、名师在线教授为特色的个性化教育平台。
                    作为中小学1对1在线辅导高端品牌,临课学依托百年交大优势、坚持“安大数研沉淀,名师五步授”理念,独创“五位一述”陪性式教学、严洗洁、北、复、交、浙等高校毕
                    业的学霸老师,遵循六步教学流程,以5位老师为单位,为学生定制个性化学习方案,并通过1对1在线辅导,让学生足不出户即可享受高端教学服务,快速提升考试成绩。</span>
            </div>
            <span style={{ color: 'gray', margin: 15 }}>版本信息</span>
            <div className='respassword'>
                <span>当前版本</span>
                <span>v2.0,3</span>
                <span style={{ color: 'green' }} onClick={() => {
                    showModal(false)
                }}>检查更新</span>
            </div>
            <span style={{ color: 'gray', margin: 15 }}>意见反馈</span>
            <div className='resmessage'>
                <div>
                    <span>意见反馈</span>
                    <span style={{ color: 'green' }} onClick={() => {
                        showModal(true)
                    }} >填写反馈</span>
                </div>
                <div>
                    <span>客服热线</span>
                    <span>400-876-3300</span>
                    <span style={{ color: 'gray' }}>(周一至周日 10:00 ~ 21:00)</span>
                </div>
            </div>
            <Button type="primary">退出登录</Button>
           
        </div>
    )
}
export default App